<template>
  <view class="page">
    <u-sticky>
      <video controls :src="details.video_url" :poster="details.cover_img" />
    </u-sticky>
    <view class="stoty-top">
      <view class="story-label">{{ details.title }}</view>
      <view class="story-row">
        <view class="f-row">
          <view v-for="(i, k) in details.labelArr" :key="k" class="f-item">
            <u-tag :text="i" bgColor="#3BA199" shape="circle" size="mini" />
          </view>
        </view>
        <view class="row-right">发布于{{ details.create_time.substr(0, 10) }}</view>
      </view>
    </view>
    <view>
      <u-parse :content="details.content" />
    </view>
  </view>
</template>

<script>
import { qiuStoryDetail } from "@/request/qiuApi.js";
export default {
  data() {
    return {
      details: {},
    };
  },
  onLoad(e) {
    this.getData(e.id);
  },
  methods: {
    // 获取数据
    getData(id) {
      qiuStoryDetail({ id }).then((res) => {
        if (res.code == 1) {
          this.details = res.data;
        }
      });
    },
    // 预览图片
    preImage() {
      uni.previewImage({
        urls: [this.details.coverPath],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding: 20rpx;
  font-family: "PingFang SC";
  .stoty-top {
    padding: 20rpx;
    border-bottom: 1rpx solid #d9d9d999;
    margin-bottom: 20rpx;
    .story-label {
      color: #222222;
      font-size: 28rpx;
      line-height: 80rpx;
      font-weight: 600;
    }
    .story-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .f-row {
        display: flex;
        flex-wrap: wrap;
        .f-item {
          margin-right: 10rpx;
        }
      }
      .row-right {
        font-weight: 400;
        font-size: 24rpx;
        line-height: 44rpx;
        color: $active-color;
      }
    }
  }
}
uni-video,
video {
  width: 100%;
  height: 332rpx;
  border-radius: 20rpx;
}
</style>
